22. Exercise: Create ColorMyViews Project and One Box

ANDK L2 64 Layout Editor SC

In this exercise you are going to create the ColorMyViews project and add, align, and style the first box.

  1. Create an Android Studio project named ColorMyViews, check "Include Kotlin support", minSDK19; choose the "Empty Activity" template; check generate a layout file and compatibility. Run the app and it should display "Hello World!" in a TextView.
  2. Open activity_main.xml in Design view.
  3. Explore the layout editor and familiarize yourself with its different panels and controls.
  4. Change the default margin to 16.
  5. Play with the Hello World box. Move the view and change its dimensions. Explore attributes. What happens if you add or move constraints? Change the bias? Remember that you can undo any actions to return to your starting point.
  6. Move the box into the upper-left corner with margins of 16dp. Give it an id of box_one_text and create a string resource box_one with a value of "Box One" for the text.
  7. Change the size and constraints of the box so that is glued to the top, and fills the width of the layout (match_constraint) and the height of the text (wrap_content).
  8. Add a style as shown in the code snippet below and style the box with it. You will have to add the roboto font to your project as for the AboutMe app. Style the box, extract the style, and extract the dimensions.
  9. Run your app and it should look like the image below.

Code snippet for the WhiteBox style:

<style name="WhiteBox">
   <item name="android:background">@android:color/holo_green_light</item>
   <item name="android:textAlignment">center</item>
   <item name="android:textSize">24sp@dimen/box_text_size</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">@android:color/white</item>
   <item name="android:fontFamily">@font/roboto</item>
</style>

If you want to start at this step, you can download this exercise code from: Step.01-Exercise-Add-Box-One.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here Step.01-Solution-Add-Box-One or using this git diff.

Task Description:

Check the steps below as you implement them to complete this exercise.

Task List:

Task Feedback:

Good start!

Solution: Step.01-Solution-Add-Box-One or diff

Next Concept